window.onload = function () {
    /*ajax("get","diansang.json",function(res){
        console.log(res);
    },true);*/
    getBannerList();//轮播图列表
    msApi();//秒杀专区数据
    hotSaleApi(); //热卖专区数据
    guessLikeApi();//猜你喜欢数据

    var searchinput = document.getElementById("searchinput");
  searchinput.addEventListener("keyup", showKeywords, false);
    searchinput.addEventListener("blur", hideKeywords, false);
    searchinput.addEventListener("focus", showKeywords, false);
    function showKeywords() {
        if (searchinput.value !== "")
            getSuggest();
            document.getElementById("search-suggest").style.display = "block";
    }


function hideKeywords() {
    document.getElementById("search-suggest").style.display = "none";
}



  //获取提示列表
  function getSuggest() {
    ajax("get", "suggest.json", function (res) {
      if (res.code == 0) {
        var suggest_list = document.getElementById("search-suggest"); //下拉提示列表容器元素
        var data = res.data;
        // console.log(data);
        var str = "";
        for (var i = 0; i < data.length; i++) {
          str += "<li>" + data[i].suggestname + "</li>";
        }
        suggest_list.innerHTML = str;
        // console.log(str)
        showKeywords();
      }
    }, true)
  }

  //防抖函数
  function debounce(fn, delay) {
    var handle;
    return function () {
      clearTimeout(handle);
      handle = setTimeout(function () {
        fn();
      }, delay)
    }
  }

  bannerOption();//轮播图
//获取轮播图列表
  function getBannerList(){
    ajax("get","swiper.json",function(res){
      console.log(res);
      if(res.code==0){
        var data = res.data;
        var swiper = document.getElementById("swiper");
        var str = "";
        for(var i=0;i<data.length;i++){
          str +='<li class="Swiper-item"><a href="#"><img src="'+data[i].banner_img+'" alt=""></a></li>';
          
        }
        swiper.innerHTML = str;
        bannerOption();//轮播图
      }
      },true)
  }


function bannerOption() {
    var Swiper = document.getElementById("swiper");//获取轮播图包裹层元素
    var SwiperItem = Swiper.getElementsByClassName("swiper-item");//获取轮播图中的列表
    var prev = document.getElementsByClassName("prev")[0];//获取上一张按钮
    var next = document.getElementsByClassName("next")[0];//获取下一张按钮
    var indicators = document.getElementsByClassName("indicator");//获取指示器
    var index = 0;//当前显示的图片索引,默认为0
    var indicators = document.getElementsByClassName("indicator");
    var timer = null;//定时器

    //设置轮播图的透明度和位移
    for (var i = 0; i < SwiperItem.length; i++) {
        if (index == i) {
          SwiperItem[i].style.opacity = 1;
        } else {
          SwiperItem[i].style.opacity = 0;
        }
        SwiperItem[i].style.transform = "translateX(" + (-i * SwiperItem[0].offsetWidth) + "px)";
      }
  

    //给圆点添加点击事件
    for (var k = 0; k < indicators.length; k++) {
        indicators[k].onclick = function () {
          clearInterval(timer);
          var clickIndex = parseInt(this.getAttribute("data-index"));
          index = clickIndex;
          changeImg();
        }
      }
  
      prev.onclick = function () {
        clearInterval(timer);
        index--;
        changeImg();
      }
  
      next.onclick = function () {
        clearInterval(timer);
        index++;
        changeImg();
      }
    Swiper.addEventListener("mouseover", function () {
        clearInterval(timer);
      }, false);
      //鼠标移出后自动播放
      Swiper.addEventListener("mouseout", function () {
        autoChange();
      }, false)
    //更换图片
    function changeImg() {
        if (index < 0) {
          index = SwiperItem.length - 1;
        } else if (index > SwiperItem.length - 1) {
          index = 0;
        }
        for (var j = 0; j < SwiperItem.length; j++) {
          SwiperItem[j].style.opacity = 0;
        }
        SwiperItem[index].style.opacity = 1;
        setIndicatorOn();
      }
  

    //设置指示点激活状态
    function setIndicatorOn() {
        for (var i = 0; i < indicators.length; i++) {
          indicators[i].classList.remove("on");
        }
        indicators[index].classList.add("on");
      }

    // 自动播放
    autoChange();
    //自动播放
    function autoChange() {
      timer = setInterval(function () {
        index++;
        changeImg();
      }, 3000);
    }

  }
  //获取秒杀专区数据
  function msApi(){
    ajax("get","miaosha.json",function(res){
      console.log(res);
      if(res.code==0){
        var cd_time=res.data.ms_time;
        var good_list=res.data.goods_list;
        countDown(cd_time);
        var miaoshaList =document.getElementById("miaoshaList");
        var str="";
        for(var i=0;i<good_list.length;i++){
          str+='<div class="ms-item">'+
                        '<a href="#" class="ms-item-link">'+
                            '<img src="'+good_list[i].good_img+'" alt="" class="ms-item-img">'+
                            '<p class="ms-item-name">'+good_list[i].name+'</p>'+
                            '<div class="ms-item-buy">'+
                               ' <span class="progress"><span class="progress-bar" style="width:'+good_list[i].progress+'%"></span></span>'+
                               ' <span class="buy-num">已抢'+good_list[i].progress+'%</span>'+
                            '</div>'+
                           ' <div class="ms-item-price">'+
                               ' <span class="cm-price new-price">$'+good_list[i].new_price+'</span>'+
                             '   <span class="cm-price origin-price">$'+good_list[i].old_price+'</span>'+
                            '</div>'+
                        '</a>'+
                    '</div>';
        }
        miaoshaList.innerHTML=str;
      }
},true);
  }

/* 秒杀倒计时*/
function countDown(t){
  var ms_time=t;
var ms_timer=setInterval(function(){
    if(ms_time<0){
        clearInterval(ms_timer);
        return;
    }else{

        calTime(ms_time);
        ms_time--;
    }
},1000);
  
}
var ms_time=7200;
var ms_timer=setInterval(function(){
    if(ms_time<0){
        clearInterval(ms_timer);
        return;
    }else{

        calTime(ms_time);
        ms_time--;
    }
},1000);
function calTime(time){
    var hour=Math.floor(time/60/60);//小时
    var minutes=Math.floor(time/60%60);//分钟
    var seconds=Math.floor(time%60);//秒
    hour=formatTime(hour);
    minutes=formatTime(minutes);
    seconds=formatTime(seconds);
    document.getElementsByClassName("cd_hour")[0].innerHTML=hour;
    document.getElementsByClassName("cd_minute")[0].innerHTML=minutes;
    document.getElementsByClassName("cd_second")[0].innerHTML=seconds;





}
function formatTime(t){
    if(t<10){
        return "0"+t;
    }else{
        return t;
    }


}
 //获取热卖单品列表
 function hotSaleApi() {
  ajax("get", "hotsale.json", function (res) {
    console.log(res);
    if (res.code == 0) {
      var list = res.data;
      var hotSaleList = document.getElementById("hotSaleList");
      var str = "";
      for (var i = 0; i < list.length; i++) {
        str += '<li class="bs-item item">' +
          '<a href="">' +
          '<img src="' + list[i].good_img + '" alt="" class="item-img">' +
          '<p class="title">' + list[i].name + '</p>' +
          '<div class="line-2 clearfix">' +
          '<span class="comment">评论<em>' + list[i].commentNum + '</em></span>' +
          '<span class="collect">收藏<em>' + list[i].collectNum + '</em></span>' +
          '</div>' +
          '<div class="line-3">' +
          '<span class="strong">' + list[i].new_price + '</span>' +
          '<span class="price-through">￥' + list[i].old_price + '</span>' +
          '<span class="sell">月销' + list[i].saleNum + '笔</span>' +
          '</div>' +
          '</a>' +
          '</li>';
      }
      hotSaleList.innerHTML = str;
    }
  }, true)
}



//获取推荐喜欢列表
function guessLikeApi() {
  ajax("get", "hotsale.json", function (res) {
    console.log(res);
    if (res.code == 0) {
      var list = res.data;
      var gl = document.getElementById("gl");
      var str = "";
      for (var i = 0; i < list.length; i++) {
        str += `<li class="like-item item">
        <a href="">
          <img src="${list[i].good_img}" alt="" class="item-img">
        </a>
        <p class="title">${list[i].name}</p>
        <div class="line-3">
          <span class="strong">${list[i].new_price}</span>
          <span class="sell">月销${list[i].saleNum}笔</span>
        </div>
        <a href="" class="item-more">发现更多相似的宝贝</a>
      </li>`;
      }
      gl.innerHTML = str;
    }
  }, true)
}
document.getElementById("loadMore").onclick = function () {
  var liNode = document.createElement("li");
  liNode.setAttribute("class", "like-item item");
  var liContent = `<a href="">
    <img src="good.jpg" alt="" class="item-img">
  </a>
  <p class="title">分布式无线路由器</p>
  <div class="line-3">
    <span class="strong">1100</span>
    <span class="sell">月销3000笔</span>
  </div>
  <a href="" class="item-more">发现更多相似的宝贝</a>`;
  liNode.innerHTML= liContent;
  document.getElementById("gl").appendChild(liNode);
}

}

window.onscroll = function(){
  scrollShowBtn();
  var winPos = document.documentElement.scrollTop || document.body.scrollTop;//获取滚动的距离
  var hotSale = document.getElementById("hotsale");//获取热卖专区元素
  var hotHeight = hotSale.offsetTop + hotSale.offsetHeight;//猜你喜欢之前的总高度

  if(winPos < hotSale.offsetTop){
    addOn(0);
  }else if(winPos >= hotSale.offsetTop && winPos < hotHeight){
    addOn(1)
  }else{
    addOn(2);
  }
}

//添加菜单激活状态
function addOn(index){
  var tool = document.getElementsByClassName("tool")[0];
  var toolItem = tool.getElementsByTagName("a");
  for(var i =0;i < toolItem.length;i++){
    toolItem[i].classList.remove("on");
  }
  toolItem[index].classList.add("on");
}

//滚动一定距离显示返回顶部按钮
function scrollShowBtn(){
  var top = document.documentElement.scrollTop || document.body.scrollTop;
  if(top > 300) {
    document.getElementById("goTop").style.display = "block";
  }else{
    document.getElementById("goTop").style.display = "none";
  }
}

//返回顶部
function goTop(){
  var topTimer = setInterval(function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var iSpeed = Math.floor(-scrollTop/8);
    if(scrollTop == 0){
      clearInterval(topTimer);
    }
    document.documentElement.scrollTop = document.body.scrollTop = scrollTop + iSpeed;
  },30)
  
}
